<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
      .style {
        font-style: italic;
      }
      .red {
        background-color: red;
      }
      .yellow {
        background-color: yellow;
      }
      .bold {
        font-weight: bold;
      }
      .bd {
        border: 1px solid #000;
      }
      .active {
        box-shadow: 3px 3px 3px 3px blueviolet;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
            什么时候使用动态类？
            当类名是通过数据来控制是否添加的时候，才会使用动态类
            情况一：当动态类只有一个类的时候，我们可以直接使用三元表达式或者是其他的表达式，返回一个字符串就行
         -->
      <div class="style" :class="isMove?'active':''">案例一</div>
      <br />
      <div class="style" :class="className">案例二</div>
      <br />

      <!-- 
        情况二：当动态类的类有一个或者多个的时候（固定个数），我们可以个动态类设置一个对象，每一个类名都是对象的key，值是一个布尔值代表是否开启当前的类
       -->
      <div class="style" :class="{active:isActive,bold:isMove,bd:isHover}">
        案例三
      </div>
      <br />
      <div class="stule" :class="{active:isMove}">案例四</div>
      <br />
      <!-- 情况三：当动态类的类有一个或者多个的时候，不确定数量的时候，可以使用数组，只要数组中的类都会添加到DOM上，不能开启和关闭，但是可以通过操作数据来控制动态类 -->
      <div class="style" :class="classArr">案例五</div>
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        isMove: true,
        isHover: true,
        isActive: true,
        className: 'active',
        classArr: ['active', 'bd', 'bold'],
      };
    },
  });
</script>
